<html><head><meta charset="utf-8"><title>04 八个JS中你见过的类型-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/35" target="_blank">零基础学透 TypeScript</a>
                    <a href="" target="_blank">
                        <span>
                            / 2-1 04 八个JS中你见过的类型
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                04 八个JS中你见过的类型
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-07-01 14:16:50
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img2.mukewang.com/5cf3c4810001ab2206400360.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">生活永远不像我们想像的那样好，但也不会像我们想像的那样糟。<p class="author">——莫泊桑</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这小节你学习起来会很轻松，这是你正式接触 TypeScript 语法的第一节课，是最最基础的语法单元。这节课我们将学习在 JavaScript 中现有的八个数据类型，当然这并不是 JavaScript 中的所有数据类型，而是现在版本的 TypeScript 支持的基本类型，在学习基础类型之前，我们先来看下如何为一个变量指定类型：</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">为一个变量指定类型的语法是使用"变量: 类型"的形式，如下：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">let</span> num<span class="token punctuation">:</span> <span class="token keyword">number</span> <span class="token operator">=</span> <span class="token number">123</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">如果你没有为这个变量指定类型，编译器会自动根据你赋给这个变量的值来推断这个变量的类型：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">let</span> num <span class="token operator">=</span> <span class="token number">123</span>
num <span class="token operator">=</span> <span class="token string">'abc'</span> <span class="token comment">// error 不能将类型“"123"”分配给类型“number”</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">当我们给<code>num</code>赋值为123但没有指定类型时，编译器推断出了<code>num</code>的类型为<code>number</code>数值类型，所以当给<code>num</code>再赋值为字符串"abc"时，就会报错。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这里还有一点要注意，就是<strong>number</strong>和<strong>Number</strong>的区别：TS中指定类型的时候要用<code>number</code>，这个是TypeScript的类型关键字。而<code>Number</code>为JavaScript的原生构造函数，用它来创建数值类型的值，它俩是不一样的。包括你后面见到的<strong>string</strong>、<strong>boolean</strong>等都是TypeScript的类型关键字，不是JavaScript语法，这点要区分开。接下来我们来看本节课的重点：<strong>八个JS中你见过的类型</strong>。</p>
</div><div class="cl-preview-section"><h3 id="布尔类型">2.1.1 布尔类型</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">类型为布尔类型的变量的值只能是 true 或 false，如下：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">let</span> bool<span class="token punctuation">:</span> <span class="token keyword">boolean</span> <span class="token operator">=</span> <span class="token keyword">false</span><span class="token punctuation">;</span>
bool <span class="token operator">=</span> <span class="token keyword">true</span><span class="token punctuation">;</span>
bool <span class="token operator">=</span> <span class="token number">123</span><span class="token punctuation">;</span> <span class="token comment">// error 不能将类型"123"分配给类型"boolean"</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">当然了，赋给 bool 的值也可以是一个计算之后结果是布尔值的表达式，比如：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">let</span> bool<span class="token punctuation">:</span> <span class="token keyword">boolean</span> <span class="token operator">=</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token number">0</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bool<span class="token punctuation">)</span> <span class="token comment">// false</span>
</code></pre>
</div><div class="cl-preview-section"><h3 id="数值类型">2.1.2 数值类型</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">TypeScript 和 JavaScript 一样，所有数字都是浮点数，所以只有一个<code>number</code>类型，而没有<code>int</code>或者<code>float</code>类型。而且 TypeScript 还支持 ES6 中新增的二进制和八进制数字字面量，所以 TypeScript 中共支持二、八、十和十六四种进制的数值。</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">let</span> num<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
num <span class="token operator">=</span> <span class="token number">123</span><span class="token punctuation">;</span>
num <span class="token operator">=</span> <span class="token string">"123"</span><span class="token punctuation">;</span> <span class="token comment">// error 不能将类型"123"分配给类型"number"</span>
num <span class="token operator">=</span> <span class="token number">0b1111011</span><span class="token punctuation">;</span> <span class="token comment">//  二进制的123</span>
num <span class="token operator">=</span> <span class="token number">0o173</span><span class="token punctuation">;</span> <span class="token comment">// 八进制的123</span>
num <span class="token operator">=</span> <span class="token number">0x7b</span><span class="token punctuation">;</span> <span class="token comment">// 十六进制的123</span>
</code></pre>
</div><div class="cl-preview-section"><h3 id="字符串">2.1.3 字符串</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">字符串类型中你可以使用单引号和双引号包裹内容，但是可能你使用的 tslint 规则会对引号进行检测，使用单引号还是双引号可以在 tslint 规则里配置。你还可以使用 ES6 语法——模板字符串，拼接变量和字符串更为方便。</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">let</span> str<span class="token punctuation">:</span> <span class="token keyword">string</span> <span class="token operator">=</span> <span class="token string">"Lison"</span><span class="token punctuation">;</span>
str <span class="token operator">=</span> <span class="token string">"Li"</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> first <span class="token operator">=</span> <span class="token string">"Lison"</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> last <span class="token operator">=</span> <span class="token string">"Li"</span><span class="token punctuation">;</span>
str <span class="token operator">=</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>first<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>last<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span> <span class="token comment">// 打印结果为:Lison Li</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">另外还有个和字符串相关的类型：<em><strong>字符串字面量类型</strong></em>。即把一个字符串字面量作为一种类型，比如上面的字符串"Lison"，当你把一个变量指定为这个字符串类型的时候，就不能再赋值为其他字符串值了，如：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">let</span> str<span class="token punctuation">:</span> <span class="token string">'Lison'</span>
str <span class="token operator">=</span> <span class="token string">'haha'</span> <span class="token comment">// error 不能将类型“"haha"”分配给类型“"Lison"”</span>
</code></pre>
</div><div class="cl-preview-section"><h3 id="数组">2.1.4 数组</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在 TypeScript 中有两种定义数组的方式：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">let</span> list1<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> list2<span class="token punctuation">:</span> <span class="token keyword">Array</span><span class="token operator">&lt;</span><span class="token keyword">number</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">第一种形式通过<code>number[]</code>的形式来指定这个类型元素均为number类型的数组类型，这种写法是推荐的写法，当然你也可以使用第二种写法。注意，这两种写法中的<code>number</code>指定的是数组元素的类型，你也可以在这里将数组的元素指定为任意类型。如果你要指定一个数组里的元素既可以是数值也可以是字符串，那么你可以使用这种方式：<code>number|string[]</code>，这种方式我们在后面学习联合类型的时候会讲到。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">当你使用第二种形式定义时，tslint 可能会警告让你使用第一种形式定义，如果你就是想用第二种形式，可以通过在 tslint.json 的 rules 中加入<code>"array-type": [false]</code>关闭 tslint 对这条的检测。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">后面我们讲接口的时候，还会讲到数组的一个特殊类型：ReadonlyArray，即只读数组。</p>
</div><div class="cl-preview-section"><h3 id="null-和-undefined">2.1.5 null 和 undefined</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">null 和 undefined 有一些共同特点，所以我们放在一起讲。说它们有共同特点，是因为在 JavaScript 中，undefined 和 null 是两个基本数据类型。在 TypeScript 中，这两者都有各自的类型即 undefined 和 null，也就是说它们既是实际的值，也是类型，来看实际例子：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">let</span> u<span class="token punctuation">:</span> undefined <span class="token operator">=</span> undefined<span class="token punctuation">;</span><span class="token comment">// 这里可能会报一个tslint的错误：Unnecessary initialization to 'undefined'，就是不能给一个值赋undefined，但我们知道这是可以的，所以如果你的代码规范想让这种代码合理化，可以配置tslint，将"no-unnecessary-initializer"设为false即可</span>
<span class="token keyword">let</span> n<span class="token punctuation">:</span> <span class="token keyword">null</span> <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span> 
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">默认情况下 undefined 和 null 可以赋值给任意类型的值，也就是说你可以把 undefined 赋值给 void 类型，也可以赋值给 number 类型。当你在 tsconfig.json 的"compilerOptions"里设置了<code>"strictNullChecks": true</code>时，那必须严格对待。undefined 和 null 将只能赋值给它们自身和 void 类型，void类型我们后面会学习。</p>
</div><div class="cl-preview-section"><h3 id="object">2.1.6 object</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">object 在 JS 中是引用类型，它和 JS 中的其他基本类型不一样，像 number、string、boolean、undefined、null 这些都是基本类型，这些类型的变量存的是他们的值，而 object 类型的变量存的是引用，看个简单的例子：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">let</span> strInit <span class="token operator">=</span> <span class="token string">"abc"</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> strClone <span class="token operator">=</span> strInit<span class="token punctuation">;</span>
strClone <span class="token operator">=</span> <span class="token string">"efg"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>strInit<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'abc'</span>

<span class="token keyword">let</span> objInit <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token punctuation">:</span> <span class="token string">"aa"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> objClone <span class="token operator">=</span> objInit<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>objClone<span class="token punctuation">)</span> <span class="token comment">// {a:"aa"}</span>
objInit<span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token string">"bb"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>objClone<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { a: 'bb' }</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">通过例子可以看出，我们修改 objInit 时，objClone 也被修改了，是因为 objClone 保存的是 objInit 的引用，实际上 objInit 和 objClone 是同一个对象。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">当我们希望一个变量或者函数的参数的类型是一个对象的时候，使用这个类型，比如：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">let</span> obj<span class="token punctuation">:</span> object
obj <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'Lison'</span> <span class="token punctuation">}</span>
obj <span class="token operator">=</span> <span class="token number">123</span> <span class="token comment">// error 不能将类型“123”分配给类型“object”</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这里有一点要注意了，你可能会想到给 obj 指定类型为 object 对象类型，然后给它赋值一个对象，后面通过属性访问操作符访问这个对象的某个属性，实际操作一下你就会发现会报错：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">let</span> obj<span class="token punctuation">:</span> object
obj <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'Lison'</span> <span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token comment">// error 类型“object”上不存在属性“name”</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这里报错说类型 object 上没有 name 这个属性。如果你想要达到这种需求你应该使用我们后面章节要讲到的接口，那 object 类型适合什么时候使用呢？我们前面说了，当你希望一个值必须是对象而不是数值等类型时，比如我们定义一个函数，参数必须是对象，这个时候就用到object类型了：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">function</span> <span class="token function">getKeys</span> <span class="token punctuation">(</span>obj<span class="token punctuation">:</span> object<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token comment">// 会以列表的形式返回obj中的值</span>
<span class="token punctuation">}</span>
<span class="token function">getKeys</span><span class="token punctuation">(</span><span class="token punctuation">{</span> a<span class="token punctuation">:</span> <span class="token string">'a'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// ['a']</span>
<span class="token function">getKeys</span><span class="token punctuation">(</span><span class="token number">123</span><span class="token punctuation">)</span> <span class="token comment">// error 类型“123”的参数不能赋给类型“object”的参数</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这里涉及到的函数的相关知识，我们会在后面章节介绍的，你只要在这里明白object类型的使用就可以了。</p>
</div><div class="cl-preview-section"><h3 id="symbol">2.1.6 symbol</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">Symbol 是 ES6 加入的新的基础数据类型，因为它的知识比较多，所以我们单独在后面的一节进行讲解。</p>
</div><div class="cl-preview-section"><h2 id="本节小结" style="font-size: 30px;">本节小结</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小节我们学习了八个在JavaScript中我们就见过的数据类型，它们是：布尔类型、数值类型、字符串、数组、null、undefined、object以及ES6中新增的symbol。在TypeScript中它们都有对应的类型关键字，对应关系为：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">布尔类型：boolean</li>
<li style="font-size: 20px; line-height: 38px;">数值类型：number</li>
<li style="font-size: 20px; line-height: 38px;">字符串类型：string</li>
<li style="font-size: 20px; line-height: 38px;">数组：Array&lt;type&gt;或type[]</li>
<li style="font-size: 20px; line-height: 38px;">对象类型：object</li>
<li style="font-size: 20px; line-height: 38px;">Symbol类型：symbol</li>
<li style="font-size: 20px; line-height: 38px;">null和undefined：null 和 undefined，这个比较特殊，它们自身即是类型</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这些类型是基础，我们后面的高级类型很多都是它们的组合或者变形，所以一定要把这些基础先学会。下个小节我们将学习 TypeScript 中新增的几种类型，了解更多基本类型。<br>
<img src="http://img.mukewang.com/5cf4bf49000143cc16000998.jpg" alt="图片描述" data-original="http://img.mukewang.com/5cf4bf49000143cc16000998.jpg" class="" style="cursor: pointer;"></p>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/340">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    03 VSCode揭秘和搭建开发环境
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/342">
                                                    <div class="next r clearfix">
                                <p>
                                    05 TS中补充的六个类型
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">
        </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>